<template>
  <div>

    <!--表格内容-->
    <el-row :gutter="20">
      <el-col :span="2"><el-button type="primary" round @click="success">开发成功</el-button></el-col>
      <el-col :span="2"><el-button type="danger" round @click="fail">开发失败</el-button></el-col>
    </el-row>
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      :default-sort="{prop: 'date', order: 'descending'}"
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
      @selection-change="handleSelectionChange">
      <el-table-column
        label="序号"
        type="selection"
        property="id">
      </el-table-column>
      <el-table-column
        property="chanceSource"
        label="机会来源">
      </el-table-column>
      <el-table-column
        property="customerName"
        label="客户名称">
      </el-table-column>
      <el-table-column
        property="cgjl"
        label="成功几率">
      </el-table-column>
      <el-table-column
        property="overview"
        label="概要">
      </el-table-column>
      <el-table-column
        property="linkMan"
        label="联系人">
      </el-table-column>
      <el-table-column
        property="linkPhone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        property="description"
        label="描述">
      </el-table-column>
      <el-table-column property="devResult" label="开发结果" >
        <template slot-scope="scope">
          <el-tag type="success" size="mini" v-if="scope.row.devResult === 1">开发成功</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.devResult === 0">未开发</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.devResult === 2">开发中</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.devResult===3">开发失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="130"
        align="center">
        <template slot-scope="scope">
          <el-button type="primary"   @click="showXQPage(scope.row.id)" v-if="scope.row.devResult===1||scope.row.devResult === 3">详情</el-button>
          <el-button type="danger" @click="showKFPage(scope.row.id)" v-if="scope.row.devResult === 2||scope.row.devResult === 0">开发</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--编辑-弹出层-->
    <el-dialog
      :title="pageName"
      :visible.sync="isShowEditDialog"
      width="430px"
      @close="dialogClose">
      <el-form
        ref="editForm"
        :model="formFileds"
        label-width="55px">
        <el-form-item label="内容" prop="planItem">
          <el-input v-model="formFileds.planItem"></el-input>
        </el-form-item>
        <el-form-item label="效果" prop="exeAffect">
          <el-input v-model="formFileds.exeAffect" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEdit()" class="pull-right margin-l-25">确定</el-button>
          <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--详情弹出层-->
    <el-dialog
      title="详情"
      :visible.sync="isShowDialog"
      width="430px"
      @close="CloseXQPage">
      <el-table
        ref="list"
        :data="planData"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}"
        @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone"
        @select="handleCheckedAllAndCheckedNone">
        <el-table-column
          label="序号"
          property="id">
        </el-table-column>
        <el-table-column
          property="planItem"
          label="计划内容">
        </el-table-column>
        <el-table-column
          property="exeAffect"
          label="执行效果">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--开发弹出层-->
    <el-dialog
      title="开发计划"
      :visible.sync="isShow"
      width="430px"
      @close="">
      <el-button type="primary" round @click="showAddPaeg">添加计划</el-button>
      <el-table
        ref="list"
        :data="kaiFaData"
        style="width: 100%"
        border
        stripe
        highlight-current-row
        :default-sort="{prop: 'date', order: 'descending'}"
        @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone"
        @select="handleCheckedAllAndCheckedNone">
        <el-table-column
          label="序号"
          property="id">
        </el-table-column>
        <el-table-column
          property="planItem"
          label="计划内容">
        </el-table-column>
        <el-table-column
          property="exeAffect"
          label="执行效果">
        </el-table-column>
        <el-table-column
          label="操作"
          width="130"
          align="center">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                       @click="rowEdit(scope.$index, scope.row)"></el-button>
            <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                       @click="rowDel(scope.row.id);"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Table",
  data() {
    return {
      formFileds: {},
      tableData: [],
      isShowEditDialog: false,
      pageName: '',
      pid:'',
      isShowDialog: false,
      planData: [],
      isShow:false,
      kaiFaData:[],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRowClick(row, event, column) {
      // 仅选中当前行
      this.setCurRowChecked(row);
    },
    handleCheckedAllAndCheckedNone(selection) {

      // 当前选中仅一行时操作-（当前表格行高亮）
      1 != selection.length && this.$refs.list.setCurrentRow();
    },
    dialogClose() {
      // 清空编辑表单
      this.$refs.editForm.resetFields();
    },


    // 选中当前行-当前行的复选框被勾选
    setCurRowChecked(row) {

      this.$refs.list.clearSelection();
      this.$refs.list.toggleRowSelection(row);
    },
    //显示添加页面
    showAddPaeg() {
      this.isShowEditDialog = true;
      this.formFileds = {};
      this.pageName = '添加';
    },
    handleEdit() {
      let param ={...this.formFileds}
      param.pid = this.pid
      axios.post('http://localhost:8081/plan/savePlan',param)
        .then(res => {
          if (res.data.code == 2000) {
            this.isShowEditDialog=false;
            this.$message.success('保存成功');
            this.kaiFa(this.pid);
          }
        })
    },
    //显示详情页面
    showXQPage(id) {
      this.isShowDialog = true;
      axios.get("http://localhost:8081/plan/selectPlanById?id=" + id)
        .then(res => {
          if (res.data.code == 2000) {
            this.planData = res.data.data;
          }
        })
  },
    //关闭详情页面
    CloseXQPage(){
      this.planData=[],
      this.isShowDialog=false
    },

    kaiFa(id){
      axios.get("http://localhost:8081/plan/selectPlanById?id=" + id)
        .then(res => {
          if (res.data.code == 2000) {
            this.kaiFaData = res.data.data;
          }
        })
    },
    //显示开发页面
    showKFPage(id){
      this.pid = id;
      this.isShow = true;
     this.kaiFa(id)
    },
    fail(){
      if (this.multipleSelection.length==1){
        let i = this.multipleSelection[0];
        if (i.devResult!=1&&i.devResult!=3){
          axios.post("http://localhost:8081/chance/updatdFail",i)
            .then(res => {
              if (res.data.code == 2000) {
                this.initTableData();
              }
            })
        }else{
          this.$message.success('请选择适当项操作');
        }
      }else {
        this.$message.success('请选择某一项操作');
      }
    },
    success(){
      if (this.multipleSelection.length==1){
        let i = this.multipleSelection[0];
        if (i.devResult!=1&&i.devResult!=3){
          axios.post("http://localhost:8081/chance/updatdSuccess",i)
            .then(res => {
              if (res.data.code == 2000) {
                this.initTableData();
              }
            })
        }else{
          this.$message.success('请选择适当项操作');
        }
      }else {
        this.$message.success('请选择某一项操作');
      }
    },
  initTableData() {//初始化表数据
    let id = localStorage.getItem("id");
    axios.get("http://localhost:8081/chance/selectChanceById?id=" + id)
      .then(res => {
        if (res.data.code == 2000) {
          this.tableData = res.data.data;
        }
      })
  },
    rowDel(id) {
      // 让当前删除按钮失焦
      event.target.blur();
      this.$confirm('确定要删除当前行吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        axios.get('http://localhost:8081/plan/deletePlan?id='+ id)
          .then(res => {
            if (res.data.code == 2000) {
              this.kaiFa(this.pid)
              this.$message.success('删除成功');
            }
          })
      });
    },
    rowEdit(index, row) {
      this.isShowEditDialog = true;
      this.pageName='修改用户';
      axios.get('http://localhost:8081/plan/selectPlanId?id='+ row.id)
        .then(res => {
          if (res.data.code == 2000) {
            this.formFileds = res.data.data
          }
        })
    },

  },
  mounted() {
    this.initTableData();
  },
}
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
</style>
